<template>
  <div class="song-list">
    <ul>
      <li @click="selectItem(song, index)" v-for="(song, index) in songs" class="item" :key="song.id">
        <div class="rank" v-show="rank">
          <span :class="[ song.name === currentSong.name ? 'iconmaikefeng' : '' ]" class="iconfont">{{ getRankText(index) }}</span>
        </div>
        <div class="content">
          <h2 class="name">{{ song.name }}</h2>
          <p class="desc">{{ getDesc(song) }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/javascript">
import { mapMutations, mapGetters } from 'vuex'

export default {
  props: {
    songs: {
      type: Array
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    getDesc (song) {
      return `${song.singer} - ${song.album}`
    },
    selectItem (item, index) {
      // this.setFindNone(false)
      this.$emit('select', item, index)
    },
    getRankCls () {},
    getRankText (index) {
      return index + 1
    },
    ...mapMutations({
      setFindNone: 'SET_FINDNONE_STATE'
    })
  },
  mounted () {
    console.log(this.rank)
  },
  computed: {
    ...mapGetters([
      'currentSong'
    ])
  }
}
</script>

<style lang="less" scoped>
@import "~@/common/css/variable";
@import "~@/common/css/mixin";
ul {
  padding: 0;
  margin: 0;
}
.song-list {
  .item {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 60px;
    z-index: 1111;
    /*border-bottom: 1px solid rgb(228, 228, 228);*/
    .count {
      flex: 0 0 50px;
      width: 50px;
      text-align: center;
      color: @color-text-g;
    }
  }
}
.content {
  flex: 1;
  line-height: 20px;
  overflow: hidden;
}
.desc {
  @include no-wrap();
  width: 80%;
  font-size: 12px;
  color: @color-text-g;
}
.name {
  margin-top: 4px;
  width: 80%;
  @include no-wrap();
  color: @color-text;
  font-size: 15px;
}
.rank {
  width: 24px;
  height: 24px;
}
</style>
